import React, { Suspense } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout, theme, Skeleton } from 'antd'
import CommonAside from '../components/commonAside'
import CommonHeader from '../components/commonHeader'
import CommonTag from '../components/commonTag'
import { RouterAuth } from '../router/routerAuth'
import { useAppSelector } from '../store/hooks'

const { Content } = Layout

export default function Main() {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken()
    // 获取展开收起的状态
    const collapsed: boolean = useAppSelector(state => state.tab.isCollapse)
    return (
        <Suspense fallback={<Skeleton active />}>
            <RouterAuth>
                <Layout className='main-container'>
                    <CommonAside collapsed={collapsed} />
                    <Layout>
                        <CommonHeader collapsed={collapsed} />
                        <CommonTag />
                        <Content
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet />
                        </Content>
                    </Layout>
                </Layout>
            </RouterAuth>
        </Suspense>
    );
}
